<!DOCTYPE html>
<html>
<head>
    <title>门组设置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet">
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet">
</head>
<body>
<div style="padding: 10px">
<div>
    <button type="button" class="button" onclick="addForm()" style="margin-right:10px; width: 110px;">添加门组</button>
    <button type="button" class="button" onclick="removeForm()" style="margin-right:10px; width: 70px;">删除</button>
</div>
<div class="row" style="padding-top: 6px;">
<div class="span4">
    <div class="panel panel-head-borded panel-small">
        <div class="panel-header">门组列表</div>
        <div id="list1">
        </div>
    </div>
</div>

<!--<div class="row">-->
<div class="span15">
<div id="tab"></div>
<div id="panel" class="bordered" style="padding:10px;" >
<div>
    <div class="panel panel-head-borded panel-small">
        <form name="Form" method="" action="" id="Form" class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>名称：</label>
                    <div class="controls">
                        <input name="Name" type="text" class="control-text"data-rules="{required:true}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>编号：</label>
                    <div class="controls">
                        <input name="Name1" type="text" class="control-text"data-rules="{required:true}">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="control-group span8" id="s1">
                    <label class="control-label"><s>*</s>门组所包含的门：</label>
                    <!--<div class="controls">-->
                        <!--<input type="text" id="show" name="show">-->
                        <!--<input type="hidden" id="hide" value="" name="hide">-->
                    <!--</div>-->
                    <div class="row">
                        <div class="span8 offset3">
                            <div id="t1">
                            </div>
                            <h2>选择的门</h2>
                            <div class="log well"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label"><s>*</s>备注：</label>
                <div class="controls control-row-auto">
                    <textarea name="" id="" class="control-row4 input-large"></textarea>
                </div>
            </div>


            <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                <div class="span13 offset3 ">
                    <button type="submit" class="button button-primary">保存</button>
                    <button type="reset" class="button">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div>
    <div class="panel panel-head-borded panel-small">
        <form name="Form1" method="" action="" id="Form1" class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>是否采用该规则：</label>
                    <div class="controls">
                        <input type="radio" name="ismerge" value="是"> 是
                        <input type="radio" name="ismerge" value="否" checked="checked" > 否
                    </div>
                </div>
            </div>
            <div class="row">
            <div class="control-group span8">
                <label class="control-label"><s>*</s>时间域组：</label>
                <div class="controls">
                    <select data-rules="{required:true}">
                        <option value="">-请选择-</option>
                        <option value="时间一组">时间一组</option>
                        <option value="时间二组">时间二组</option>
                        <option value="时间三组">时间三组</option>
                        <option value="时间四组">时间四组</option>
                    </select>
                </div>
            </div>
            </div>
            <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                <div class="span13 offset3 ">
                    <button type="submit" class="button button-primary">保存</button>
                    <button type="reset" class="button">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>

<div>
    <div class="panel panel-head-borded panel-small">
        <form name="Form2" method="" action="" id="Form2" class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>是否采用该规则：</label>
                    <div class="controls">
                        <input type="radio" name="ismerge" value="是"> 是
                        <input type="radio" name="ismerge" value="否" checked="checked" > 否
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>人数要求：</label>
                    <div class="controls">
                        <select data-rules="{required:true}">
                            <option value="">-请选择-</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>人组要求：</label>
                    <div class="controls">
                        <select data-rules="{required:true}">
                            <option value="">-请选择-</option>
                            <option value="2">无要求</option>
                            <option value="3">有要求无顺序</option>
                            <option value="4">人组+顺序</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>人组选择：</label>
                    <div id="list2" class="controls">
                    </div>
                </div>
            </div>
            <br>
            <br>
            <br>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>超时时间(秒)：</label>
                    <div class="controls">
                        <input name="Name" type="text" class="control-text"data-rules="{required:true}">
                    </div>
                </div>
            </div>


            <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                <div class="span13 offset3 ">
                    <button type="submit" class="button button-primary">保存</button>
                    <button type="reset" class="button">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>



<div>
    <div class="panel panel-head-borded panel-small">
        <form name="Form2" method="" action="" id="Form3" class="form-horizontal">

            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>互动模式：</label>
                    <div class="controls">
                        <select data-rules="{required:true}">
                            <option value="">-请选择-</option>
                            <option value="2">关联互锁</option>
                            <option value="3">关联互开</option>
                            <option value="4">关联互锁互开</option>
                            <option value="5">前锁后开</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>相关联门组：</label>
                    <div class="controls">
                        <select data-rules="{required:true}">
                            <option value="">-请选择-</option>
                            <option value="2">门组1</option>
                            <option value="3">门组2</option>
                            <option value="4">门组3</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>通断时间(秒)：</label>
                    <div class="controls">
                        <input name="Name" type="text" class="control-text"data-rules="{required:true}">
                    </div>
                </div>
            </div>

            <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                <div class="span13 offset3 ">
                    <button type="submit" class="button button-primary">保存</button>
                    <button type="reset" class="button">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>
</div>
</div>
<!--</div>-->


</div>
<script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
<script src="../../resources/lib/bui/js/bui-min.js"></script>
<!-- script start-->
<script type="text/javascript">


    var Tab = BUI.Tab
    var tab = new Tab.TabPanel({
        render : '#tab',
        elCls : 'nav-tabs',
        panelContainer : '#panel',
        selectedEvent : 'mouseenter',//默认为click
        autoRender: true,
        children:[
            {text:'基本信息设置',value:'1'},
            {text:'时间规则',value:'2'},
            {text:'多人规则',value:'3'} ,
            {text:'门逻辑关系',value:'4'}
        ]
    });
    tab.setSelected(tab.getItemAt(0));

    BUI.use(['bui/list'],function(List){
        var items = [
                    { text: '门组1'},
                    { text: '门组2'},
                    { text: '门组3'}
                ],
                list = new List.SimpleList({
                    elCls:'bui-select-list',//默认是'bui-simple-list'
                    width:148,
                    height:700,
                    render : '#list1',
                    items : items
                });
        list.render();
        list.on('itemclick', function(){
            $("#Form input[name=Name]").val(list.getSelectedText());
        });
    });

    BUI.use('bui/form',function (Form) {
        var Form = BUI.Form;
        new Form.Form({
            srcNode : '#Form'
        }).render();
    });
    BUI.use('bui/form',function (Form) {
        var Form = BUI.Form;
        new Form.Form({
            srcNode : '#Form1'
        }).render();
    });
    BUI.use('bui/form',function (Form) {
        var Form = BUI.Form;
        new Form.Form({
            srcNode : '#Form2'
        }).render();
    });
    BUI.use('bui/form',function (Form) {
        var Form = BUI.Form;
        new Form.Form({
            srcNode : '#Form3'
        }).render();
    });
    var Form = BUI.Form;
    new Form.Form('beforesubmit',function(){
        if(!editing.isValid()){
            return false;
        }
    });

</script>
<script type="text/javascript">
    BUI.use('bui/calendar',function(Calendar){
        var datepicker = new Calendar.DatePicker({
            trigger:'.calendar',
            autoRender : true
        });
    });

//    BUI.use(['bui/picker','bui/tree'],function(Picker,Tree){
////树节点数据，
////text : 文本，
////id : 节点的id,
////leaf ：标示是否叶子节点，可以不提供，根据childern,是否为空判断
////expanded ： 是否默认展开
//        var data = [
//                    {text : '1',id : '1',children: [{text : '11',id : '11'}]},
//                    {text : '2',id : '2',expanded : true,children : [
//                        {text : '21',id : '21',children : [{text : '211',id : '211'},{text : '212',id : '212'}]},
//                        {text : '22',id : '22'}
//                    ]},
//                    {text : '3',id : '3'},
//                    {text : '4',id : '4'}
//                ],
////由于这个树，不显示根节点，所以可以不指定根节点
//                tree = new Tree.TreeList({
//                    nodes : data,
////dirSelectable : false,//阻止树节点选中
//                    showLine : true //显示连接线
//                });
//
//        var picker = new Picker.ListPicker({
//            trigger : '#show',
//            valueField : '#hide', //如果需要列表返回的value，放在隐藏域，那么指定隐藏域
//            width:150, //指定宽度
//            children : [tree] //配置picker内的列表
//        });
//        picker.render();
//
//    });

    var List = BUI.List
    var items = [
                {text:'选项1',value:'a'},
                {text:'选项2',value:'b'},
                {text:'选项3',value:'c'}



            ],
            list = new List.Listbox({
                elCls:'bui-select-list',//默认是'bui-simple-list'
                width:148,
                render : '#list2',
                items : items
            });
    list.render();
    $('#J_BtnAlert').on('click',function(){
        alert(list.getSelectionText() + '：' + list.getSelectionValues());
    });




    BUI.use('bui/tree',function (Tree) {
        //树节点数据，
        //text : 文本，
        //id : 节点的id,
        //leaf ：标示是否叶子节点，可以不提供，根据childern,是否为空判断
        //expanded ： 是否默认展开
        //checked : 节点是否默认选中
        var data = [
            {text : '1',id : '1',checked : true,children: [{text : '11',id : '11'}]},
            {text : '2',id : '2',expanded : true,children : [
                {text : '21',id : '21',children : [{text : '211',id : '211'},{text : '212',id : '212'}]},
                {text : '大厅门',id : '大厅门',leaf : true}
            ]},
            {text : '实验室前门',id : '实验室前门'},
            {text : '实验室后门',id : '实验室后门'}
        ];
        //由于这个树，不显示根节点，所以可以不指定根节点
        var tree = new Tree.TreeList({
            render : '#t1',
            nodes : data,
            checkType: 'onlyLeaf', //checkType:勾选模式，提供了4中，all,onlyLeaf,none,custom
            showLine : true //显示连接线
        });
        tree.render();

        tree.on('checkchange',function(ev){
            var checkedNodes = tree.getCheckedNodes();
            var str = '';
            BUI.each(checkedNodes,function(node){
                str += node.id + ',';
            });
            $('.log').text(str);
        });
    });


</script>
<!-- script end -->
</div>
</body>
</html>